<template>
  <div>
    <trialView @toRegister="handleRegister"/>
    <div class="recommentGood pageCon">
      <div class="flex-center-xs handleRegister-box"
        @click="toDetail(item.newsId)" 
        v-for="item in recommentGoodData.list"
        :key="item.newsId"
      >
        <img :src="item.coverImage" alt="" width="249" height="140">
        <div class="flex-xs recommentGood-con">
          <div>
            <div class="title overEllipsis1">{{item.title}}</div>
            <div class="intriduce overEllipsis2">{{item.subtitle}}</div>
          </div>
          <div class="time">{{item.publishTime}}</div>
        </div>
      </div>
      <el-pagination 
        background 
        layout="prev, pager, next" 
        :total="recommentGoodData.total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <Register ref="register" @registerSuccess="handleSuccess"/>
    <RegisterSrccess ref="success"/>
  </div>
</template>
<script>
 import {
    ref,
    onMounted
  } from "vue";
  import {
    useRouter,
  } from "vue-router";
import trialView from '@/components/trialView/index'
import Register from '@/components/register/index.vue'
import RegisterSrccess from '@/components/register/success.vue'
import { queryNewsList } from '@/api/register.js'
export default {
  name: 'app',
  components: {
    trialView,
    // RecruitCon,
    Register,
    RegisterSrccess
  },
  data () {
    return {
     
    }
  },
  setup () {
    const router = useRouter()
    const  recommentGoodData= ref({})
    const  params= ref({})
    const getData = async () =>{
       params.value = {
         companyId: '123',
          userId: '456',
        pageNum: 1,
        pageSize: 10,
        type: 'news'
      }
      queryNewsList(params.value).then(res=> {
        recommentGoodData.value.list = res.data.respData.list
        // recommentGoodData.value.total = res.data.respData.total
        recommentGoodData.value.total = 5
      })
    }
    onMounted(getData)
    return {
      router,
      params,
      recommentGoodData,
    }
  },
  methods:{
      handleRegister () {
        this.showRegister()
      },
      showRegister () {
        this.$refs.register.show()
      },
      handleSuccess () {
        this.$refs.success.show()
      },
      toDetail(id) {
        this.router.push({
          path: '/recommentGood/detail',
          query: {
            id: id
          }
        })
      },
      handleCurrentChange (currentPage) {
        console.log(currentPage)
         this.params.pageNum = currentPage
      }
      
    }
}
</script>
<style lang="less" scoped>
.recommentGood{
  padding:80px 0;
  &-box{
    height:140px;
  }
  &-con{
    width:930px;
    height:140px;
    flex-direction: column;
    padding-left:20px;
  }
  .title{
    font-size: 20px;
    color:@color3;
    font-weight: 500;
    &:hover{
      color:@mainColor;
    }
  }
  .intriduce{
    font-size: 16px;
    color:@color9;
    margin-top:14px;
  }
  .time{
    font-size: 12px;
    color:@color9;
  }
}

</style>